<template>
    <div>
        name: {{name}}
        <br/>
        info: {{info}}
        <br/>
        list: {{list}}
        <br/>
        data.a: {{a}}
        <br/>
        <button @click="handleBChange">change data.b</button>
    </div>
</template>

<script>
    export default {
        name: 'PropsAndData',
        props: {
            name: String,
            info: Object,
            list: {
                type: Array,
                default: ()=> []
            }
        },
        data() {
            return {
                a: 'hello',
                b: 'world'
            }
        },
        methods: {
            handleBChange() {
                this.b =  'vue'
                // 为什么没有触发组件的更新？ 因为组件页面上没有使用到这个属性 
                // 组件中没有使用到这个属性的时候 并不会通知Watcher去更新组件
                console.log('data.b 发生了变化 但是并没触发组件更新',this.b);
            }
        }
    }
</script>
